<template>
	<div id="addressList">
		<div class="head">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>地址管理</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button type="info" @click="logout">退出</el-button>
		</div>
		<el-card>
			<van-address-list
				v-model="chosenAddressId"
				:list="list"
				default-tag-text="默认"
				@select="isdefault"
				@add="onAdd"
				@edit="onEdit"
			/>
			<van-popup v-model="editcheck">
				<van-address-edit
					:address-info="addressInfo"
					:area-list="areaList"
					show-delete
					show-set-default
					:area-columns-placeholder="['请选择', '请选择', '请选择']"
					@save="editAddress"
					@delete="onDelete"
				/>
			</van-popup>

			<van-popup v-model="addCheck">
				<van-address-edit
					:area-list="areaList"
					show-set-default
					:area-columns-placeholder="['请选择', '请选择', '请选择']"
					@save="onSave"
					@delete="onDelete"
					ref="addressEdit"
				/>
			</van-popup>
		</el-card>
	</div>
</template>

<script>
	import { areaList } from '@vant/area-data'
	export default {
		name: 'AddressListVue',
		data() {
			return {
				editcheck: false,
				addCheck: false,
				chosenAddressId: '1',
				addressInfo: {
					id: '',
					name: '',
					tel: '',
					province: '',
					city: '',
					county: '',
					addressDetail: '',
					isDefault: '',
					areaCode: '',
				},
				list: [],
				areaList,
				searchResult: [],
				user: {},
			}
		},
		created() {
			this.user = this.$cookies.get('user')
			this.do()
		},
		methods: {
			// 退出登录
			async logout() {
				const result = await confirm('是否退出登录！')
				if (result) {
					const res = await this.$api.sort.logout()
					if (res.data.code === 1) {
						this.$message.success('退出成功！')
						this.$cookies.remove('user')
						localStorage.clear()
						this.$router.push({ path: '/' })
					} else {
						this.$message.success('退出失败！')
					}
				}
			},
			//初始化数据
			async do() {
				let res = await this.$api.sort.allAddress({ userId: this.user.userId })
				if (res.data.code == 1) {
					this.list = res.data.data
					this.list.forEach((item) => {
						if (item.isDefault == 1) {
							item.isDefault = true
							this.chosenAddressId = item.id
						} else {
							delete item.isDefault
						}
					})
				}
			},
			//把地址字符串分成省份、城市、区县和详细地址
			splitAddress(address) {
				var reg = /.+?(省|市|自治区|自治州|县|区)/g
				return address.match(reg)
			},
			// 打开新增地址对话框
			onAdd() {
				this.addCheck = true
			},
			// 打开编辑地址对话框
			onEdit(item, index) {
				this.editcheck = true
				this.addressInfo.id = item.id
				this.addressInfo.name = item.name
				this.addressInfo.tel = item.tel
				let address = this.splitAddress(item.address)
				let lenght = address.length
				let add1 = item.address.split(address[lenght - 1])[1]
				if (lenght == 3) {
					this.addressInfo.province = address[0]
					this.addressInfo.city = address[1]
					this.addressInfo.county = address[2]
				} else {
					this.addressInfo.province = address[0]
					this.addressInfo.city = address[0]
					this.addressInfo.county = address[1]
				}
				this.addressInfo.addressDetail = add1
				this.addressInfo.isDefault = item.isDefault
				for (index in areaList.county_list) {
					if (areaList.county_list[index] == this.addressInfo.county) {
						this.addressInfo.areaCode = index
					}
				}
			},
			//新增配送地址
			async onSave(content) {
				var address =
					content.province + content.city + content.county + content.addressDetail
				var isDefault = content.isDefault ? '1' : '0'
				var data = {
					name: content.name,
					tel: content.tel,
					address: address,
					isDefault: isDefault,
					userId: this.user.userId,
				}
				let res = await this.$api.sort.addAddress(data)
				if (res.data.code == 1) {
					this.$message.success(res.data.data)
					this.do()
				} else this.$message.error(res.data.data)
				this.addCheck = false
				this.$refs.addressEdit.reset()
			},
			//修改配送地址信息
			async editAddress(content) {
				var address =
					content.province + content.city + content.county + content.addressDetail
				var isDefault = content.isDefault ? '1' : '0'
				var data = {
					id: content.id,
					name: content.name,
					tel: content.tel,
					address: address,
					isDefault: isDefault,
					userId: this.user.userId,
				}
				let res = await this.$api.sort.editAddress(data)
				if (res.data.code == 1) {
					this.$message.success(res.data.data)
					this.do()
				} else this.$message.error(res.data.data)
				this.editcheck = false
			},
			// 删除配送地址信息
			async onDelete(content) {
				let res = await this.$api.sort.delAddress({ id: content.id })
				if (res.data.code == 1) {
					this.$message.success(res.data.data)
					this.do()
				} else this.$message.error(res.data.data)
				this.editcheck = false
			},
			async isdefault(val, i) {
				let res = await this.$api.sort.editIsDefault({
					id: val.id,
					isDefault: '1',
					userId: this.user.userId,
				})
				if (res.data.code == 1) {
					this.list.forEach((item, index) => {
						if (index == i) {
							item.isDefault = true
							this.chosenAddressId = item.id
						} else {
							item.isDefault = false
						}
					})
					this.$message.success(res.data.data)
				} else this.$message.error(res.data.data)
			},
		},
	}
</script>

<style lang="less" scoped>
	#addressList {
		.head {
			.el-breadcrumb {
				float: left;
				font-size: 2rem;
			}
			.el-button {
				float: right;
			}
			padding-bottom: 10vh;
		}
		.el-card {
			.van-address-list__bottom {
				position: relative;
				top: 20px;
			}
			.van-popup--center {
				width: 50%;
			}
		}
	}
</style>